<template>
    <div class="add">
        <h2 class="tit">版本管理中心编辑</h2>
        <div class = 'main'>
            <p class="title">基本信息</p>
            <Form ref="formValidate" :model="params" :rules="ruleValidate" :label-width="80" label-position="left" class="formcont">
                <!-- 版本id -->
                <FormItem label="版本id" prop="versionId">
                    <Input
                        v-model.trim="params.versionId"
                        placeholder="请输入版本Id"
                        maxlength="16"
                        style="width:180px;"
                        disabled
                    ></Input>
                </FormItem>
                <!-- 版本名 -->
                <FormItem label="版本名" prop="versionName">
                    <Input
                        v-model.trim="params.versionName"
                        placeholder="请输入版本名"
                        maxlength="100"
                        style="width:300px;"
                    ></Input>
                </FormItem>
                <!-- 版本号 -->
                <FormItem label="版本号" prop="versionNum">
                    <Input
                        v-model.trim="params.versionNum"
                        placeholder="请输入版本号"
                        maxlength="100"
                        style="width:300px;"
                        disabled
                    ></Input>
                </FormItem>
                <!-- 版本类型 -->
                <FormItem label="版本类型" prop="type">
                    <Select v-model="params.type" style="width:100px">
                        <Option
                            v-for="item in cityList"
                            :value="item.value"
                            :key="item.value"
                            style='text-align:center;'
                        >{{ item.label }}</Option>
                    </Select>
                </FormItem>
                <!-- 下载路径 -->
                <FormItem label="下载路径" prop="downloadPath">
                    <Input
                        v-model.trim="params.downloadPath"
                        placeholder="请输入下载路径"
                        maxlength="200"
                        style="width:300px;"
                    ></Input>
                </FormItem>
                <!-- 版本说明 -->
                <FormItem label="版本说明" prop="content">
                    <Input
                        v-model="params.content"
                        type="textarea"
                        :autosize="{minRows: 2,maxRows: 5}"
                        placeholder="请输入版本说明"
                        maxlength="200"
                    ></Input>
                </FormItem>
            </Form>
        </div>
        <div class="butbox">
            <Button type="primary" @click="handleSubmit('formValidate')" :disabled = 'btuStatus' class="btn">
                <Icon type="ios-checkmark" class="icon"/>保存
            </Button>
            <Button @click="back('formValidate')" style="margin-left: 8px">
                <i class = "iconfont icon-butongyi icon"></i>返回
            </Button>
        </div>
    </div>
</template>
<script>
import api from "@/api/commonApi";
export default {
    data() {
        return {
            params: {
                // 版本说明
                content: "",
                // 版本类型
                type: "",
                // 版本ID
                versionId: null,
                // 版本名字
                versionName: "",
                // 版本号
                versionNum: "",
                // 版本路径
                downloadPath: ""
            },
            cityList: [
                {
                    value: "1",
                    label: "IOS"
                },
                {
                    value: "2",
                    label: "安卓"
                }
            ],
            ruleValidate: {
                versionId: [
                    {
                        // 是否校验
                        required: true,
                        // 提示文字
                        message: "请输入版本ID",
                        // 触发事件
                        trigger: "blur"
                    }
                ],
                versionName: [
                    {
                        // 是否校验
                        required: true,
                        // 提示文字
                        message: "请输入版本名字",
                        // 触发事件
                        trigger: "blur"
                    }
                ],
                versionNum: [
                    {
                        // 是否校验
                        required: true,
                        // 提示文字
                        message: "请输入版本号",
                        // 触发事件
                        trigger: "blur"
                    }
                ],
                type: [
                    {
                        required: true,
                        message: "请选择版本类型",
                        trigger: "change"
                    }
                ],
                downloadPath: [
                    {
                        // 是否校验
                        required: true,
                        // 提示文字
                        message: "请输入版本路径",
                        // 触发事件
                        trigger: "blur"
                    }
                ],
                content: [
                    {
                        required: true,
                        message: "请输入版本说明",
                        trigger: "blur"
                    }
                ],
                btuStatus: false,
            }
        };
    },
    created() {
        let breadList = [
            { path: "/index", title: "首页" },
            {
                path: "/index/configuration/admin/user/list",
                title: "帐号权限配置"
            },
            {
                path: "/index/configuration/versionManagement/list",
                title: "版本管理中心"
            }
        ];
        this.$emit("changeBreadList", breadList);
    },
    mounted() {
        let id = this.$route.query.id;
        this.$axios
            .post(api.findVersionById, {
                id
            })
            .then(res => {
                if (res.data.code) {
                    let ret = res.data.object;
                    this.params.id = ret.id;
                    this.params.content = ret.content;
                    this.params.type = ret.type.toString();
                    this.params.versionId = ret.versionId.toString();
                    this.params.versionName = ret.versionName;
                    this.params.versionNum = ret.versionNum;
                    this.params.downloadPath = ret.downloadPath;
                } else {
                    this.$Message.info("查询数据失败");
                }
            });
    },
    methods: {
        handleSubmit(name) {
            this.btuStatus = true
            let flag = new RegExp("^[1-9]([0-9])*$").test(this.params.versionId);
            if (!flag) {
                this.$Message.error("请输入正整数");
                this.btuStatus = false
                return;
            }
            this.$refs[name].validate(valid => {
                if (valid) {
                    // 必填项填写完成
                    this.$axios
                        .post(api.updateVersion, this.params)
                        .then(res => {
                            if (res.data.code) {
                                this.$Message.info("修改成功");
                                let pageNo = this.$route.query.pageNo;
                                this.btuStatus = false
                                setTimeout(() => {
                                    this.functionJS.queryNavgationTo(
                                        this,
                                        "/index/configuration/versionManagement/list",
                                        {
                                            pageNo
                                        }
                                    );
                                }, 800);
                            }
                        });
                } else {
                    // 必填项填写失败
                    this.$Message.error("请检查必填项是否填写完整!");
                    this.btuStatus = false
                }
            });
        },
        // 后退
        back() {
            let pageNo = this.$route.query.pageNo;
            this.functionJS.queryNavgationTo(
                this,
                "/index/configuration/versionManagement/list",
                {
                    pageNo
                }
            );
        }
    }
};
</script>
<style lang="less" scoped>
.add {
    width: calc(100%);
    padding: 10px 30px;
    margin: 0 auto;
    background: #fff;
    .tit {
        margin:10px 0;
        font-weight:bold;
        text-align:center;
    }
    .main{
        width: 98%;
        display: flex;
        flex-direction: column;
        margin: 10px auto;
        border: 1px solid #f0f0f0;
        box-shadow: 0 4px 3px #ebedf8;
        border-radius: 5px;
        margin-bottom: 20px;
        .title {
            font-size: 20px;
            padding-left: 15px;
            margin-bottom: 20px;
            color: #333;
            height: 40px;
            line-height: 40px;
            background: #ebedf8;         
        }
        .formcont {
            width: 70%;
            margin: 0 auto;
            .suojin {
                margin-left: 10px;
            }
        }
    }
    .butbox {
        text-align: center;
        margin: 20px auto;
        .icon {
            font-size: 14px;
            margin-right: 5px;
        }
        .btn{
            width: 75px;
            height: 35px;
        }
    }       
}
</style>
